<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>分配角色</title>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css" th:href="@{/static/layui/css/layui.css}">
    <link href="static/css/public.css" th:href="@{/static/css/public.css}" media="all" type="text/css" rel="stylesheet"/>
</head>
<body class="childrenBody">
    <form class="layui-form" action="#">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="hidden" name="userId" class="userId" >
                <input type="text" name="username" placeholder="用户名" class="layui-input layui-disabled username" disabled >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-block roleList"></div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="*">提交</button>
                <button type="button" class="layui-btn layui-btn-primary cancel_btn">取消</button>
            </div>
        </div>
    </form>
</body>
<script type="text/javascript" src="static/layui/layui.js"  th:src="@{/static/layui/layui.js}"></script>
<!--<script type="text/javascript" src="static/js/userList.js"  th:src="@{/static/js/allotRole.js}"></script>-->
<script type="text/javascript">
    layui.use(['form'],function() {
        var form = layui.form,
        $ = layui.jquery;

        // 使用延时，防止取不到隐藏域里的userId
        setTimeout(function () {
            $.ajax({
                url: '/role/listByUserId',
                dataType: 'json',
                data: {userId:$(".userId").val()},
                success: function(res){
                    if(res != null){
                        $.each(res, function (index, item) {
                            if (item.checked == true) {
                                $(".roleList").append('<input type="checkbox" id="' + item.id + '" name="roleId" value="' + item.id + '" title="' + item.roleName + '" checked><div class="layui-unselect layui-form-checkbox layui-form-checked"><span>' + item.roleName + '</span><i class="layui-icon layui-icon-ok"></i></div>');
                            } else {
                                $(".roleList").append('<input type="checkbox" id="' + item.id + '" name="roleId" value="' + item.id + '" title="' + item.roleName + '"><div class="layui-unselect layui-form-checkbox"><span>' + item.roleName + '</span><i class="layui-icon layui-icon-ok"></i></div>');
                            }
                        });
                    }
                    form.render();
                }
            });
        }, 80);

        form.on('submit(*)', function(data){
            var roleIds = [];
            $("input:checkbox[name='roleId']:checked").each(function() { // 遍历name=standard的多选框
                roleIds.push($(this).val());
            });

            $.ajax({
                url: '/role/updateUserRole',
                dataType: 'json',
                data: {
                    userId:$(".userId").val(),
                    roleIds:roleIds
                },
                success: function(res){
                    if(res.status == 200){
                        var index=parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                    }
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        // 取消按钮
        $(".cancel_btn").click(function(){
            var index=parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        });
    })
</script>
</html>